<template>
    <div>
      <span class="textColorClass"></span>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted, onUnmounted} from 'vue';
const texts=ref(['疾病','药品','肺炎','咳嗽']);
const currentTextIndex = ref(0);
    const currentText = ref(texts.value[0]);
    const textColorClass = ref('');
     const changeTextAndColor = () => {
      currentTextIndex.value = (currentTextIndex.value + 1) % texts.value.length;
      currentText.value = texts.value[currentTextIndex.value];
      textColorClass.value = `text - color - ${currentTextIndex.value}`;
    };
    let timer: number | null = null;
       onMounted(() => {
      timer = setInterval(changeTextAndColor, 2000);
    });

    onUnmounted(() => {
      if (timer) {
        clearInterval(timer);
      }
    });

</script>

<style lang="scss" scoped>
.text-color-0 {
  color: red;
  transition: color 1s ease;
}

.text-color-1 {
  color: blue;
  transition: color 1s ease;
}

.text-color-2 {
  color: green;
  transition: color 1s ease;
}
</style>